const { ref } = Vue;

export default {
  template: "#todoListItem",
  props: ["todoItem"],

  setup(props, context) {
    let checked = ref(false);
    const handleCheck = (todoItem) => {
      checked.value === true ? false : true;
      // todoItem.completed = !todoItem.completed
      // context.emit('handle-check', todoItem)
    };
    return {
      checked,
      handleCheck,
    };
  },
  template: `
  <el-row class="standard_shade grey" style="padding: 20px; margin-bottom: 10px;border-radius: 5px;">
    <el-col :span="24">
      <!-- <el-card id="content" shadow="always" :body-style="{ padding: '20px' }">
        </el-card> -->
      <el-checkbox v-model="checked" label="content" :indeterminate="false" @change="handleCheck(todoItem)">
        {{todoItem.content}}
      </el-checkbox>
    </el-col>
  </el-row>
  `,
};
